<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>储存源配置</title>
    <link rel="stylesheet" th:href="@{/layui/layui/css/layui.css}">
    <script th:src="@{/static/js/jquery-3.4.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/layui/layui/layui.js}"></script>
</head>
<body>
<div class="layui-main" style="width: 50%;margin-top: 50px;">
    <h2>存储源Key配置</h2>
    <br/>

    <form class="layui-form layui-form-pane" action="">

        <div class="layui-form-item">
            <label class="layui-form-label">对象存储源</label>
            <div class="layui-input-block">
                <select id="StorageType" name="city" lay-filter="business" lay-verify="required">
                    <option value="0">未设置任何存储源</option>
                    <option value="5">本地存储</option>
                    <option value="1">网易NOS</option>
                    <option value="2">阿里OSS</option>
                    <option value="3">又拍USS</option>
                    <option value="4">七牛云KODO</option>
                    <option value="6">腾讯COS</option>
                </select>
            </div>
        </div>


        <hr/>

        <div class="layui-form-item" id="c1">
            <label class="layui-form-label" id="keyusername">AccessKey</label>
            <div class="layui-input-block">
                <input id="AccessKey" type="text" name="title" autocomplete="off"
                       class="layui-input" th:value="${AccessKey}"/>
            </div>
        </div>

        <div class="layui-form-item" id="c2">
            <label class="layui-form-label" id="keypass">AccessSecret</label>
            <div class="layui-input-block">
                <input id="AccessSecret" type="text" name="title" autocomplete="off"
                       class="layui-input" th:value="${AccessSecret}"/>
            </div>
        </div>

        <div class="layui-form-item" id="c3">
            <label class="layui-form-label" >Endpoint</label>
            <div class="layui-input-block">
                <input id="Endpoint" type="text" name="title" autocomplete="off"
                       class="layui-input" th:value="${Endpoint}"/>
                <span id="ysm" style="color: #DAA5A6;">需带有http://或https://</span>
            </div>
        </div>

        <div class="layui-form-item" id="c3-1" style="display: none;">
            <label class="layui-form-label">桶地区</label>
            <div class="layui-input-block">
                <select id="Endpoint2" name="diqu"  lay-verify="required">
                    <option value="0">请选择地区</option>
                    <option value="1">华东</option>
                    <option value="2">华北</option>
                    <option value="3">华南</option>
                    <option value="4">北美</option>
                    <option value="5">东南亚</option>
                </select>
            </div>
        </div>

        <div class="layui-form-item" id="c4">
            <label class="layui-form-label">存储桶名称</label>
            <div class="layui-input-block">
                <input id="Bucketname" type="text" name="title" autocomplete="off"
                       class="layui-input" th:value="${Bucketname}"/>
            </div>
        </div>
        <div class="layui-form-item" id="c5">
            <label class="layui-form-label" id="keyurlname">请求域名</label>
            <div class="layui-input-block">
                <input id="RequestAddress" type="text" name="title" autocomplete="off" placeholder="生成图片url的域名"
                       class="layui-input" th:value="${RequestAddress}"/>
                <span style="color: #DAA5A6;">需带有http://或https://</span>
            </div>
        </div>


        <div class="layui-form-item">
            <h3 id="c6" style="display: none;color: #DAA5A6;">确保站点设置中：【站点域名】已经填写。</h3>
            <br />
            <a class="layui-btn" lay-submit="" lay-filter="demo2" onclick="issave();">保存</a>
        </div>
    </form>
</div>
<script>
    layui.use(['form', 'layedit', 'laydate'], function () {
        var form = layui.form;
        //监听提交
        form.on('submit(formDemo)', function (data) {
            layer.msg(JSON.stringify(data.field));
            return false;
        });
        //select选中事件
        form.on('select(business)', function(data){
            $("#AccessKey").val('');
            $("#AccessSecret").val('');
            $("#Endpoint").val('');
            $("#Bucketname").val('');
            $("#RequestAddress").val('');
            if(data.value!=5){

                $("#c1").css('display','block');
                $("#c2").css('display','block');
                $("#c3").css('display','block');
                $("#c3-1").css('display','block');
                $("#c4").css('display','block');
                $("#c5").css('display','block');
                $("#c6").css('display','none');

                if(data.value==1){
                    $("#c3").css('display','block');
                    $("#c3-1").css('display','none');
                    $("#keyusername").text('AccessKey');
                    $("#keypass").text('AccessSecret');
                    $("#c3 label").text('Endpoint');
                }else if(data.value==2){
                    $("#c3").css('display','block');
                    $("#c3-1").css('display','none');
                    $("#keyusername").text('AccessKey');
                    $("#keypass").text('AccessSecret');
                    $("#c3 label").text('Endpoint');
                }else if(data.value==3){
                    $("#c3").css('display','none');
                    $("#keyusername").text('操作员名称');
                    $("#keypass").text('操作员密码');
                    $("#c3-1").css('display','none');
                }else if(data.value==4){
                    $("#c3").css('display','none');
                    $("#c3-1").css('display','block');
                    $("#keyusername").text('AccessKey');
                    $("#keypass").text('SecretKey');
                }else if(data.value=6){
                    $("#c3-1").css('display','none');
                    $("#c3 label").text('地区代码');
                    $("#keyusername").text('SecretId');
                    $("#keypass").text('SecretKey');
                }else{
                    $("#c3").css('display','block');
                    $("#c3-1").css('display','none');
                    $("#keyusername").text('AccessKey');
                    $("#keypass").text('AccessSecret');
                    $("#c3 label").text('Endpoint');
                }
            }else{
                $("#c1").css('display','none');
                $("#c2").css('display','none');
                $("#c3").css('display','none');
                $("#c3-1").css('display','none');
                $("#c4").css('display','none');
                $("#c5").css('display','none');
                $("#c6").css('display','block');
            }

            if(data.value==6){
                $("#ysm").text("如：北京地区就写ap-beijing");
            }else{
                $("#ysm").text("需带有http://或https:");
            }

            $.ajax({
                type: "POST",
                url: "/admin/root/getkey",
                data: {
                    storageType: data.value,
                },
                dataType: "json",
                success: function (data) {
                        $("#AccessKey").val(data[0].accessKey);
                        $("#AccessSecret").val(data[0].accessSecret);
                        $("#Endpoint").val(data[0].endpoint);
                        $("#Bucketname").val(data[0].bucketname);
                        $("#RequestAddress").val(data[0].requestAddress);
                }
            });
        });

    });
    $(function () {
        var types = [[${StorageType!=null?StorageType:0}]];
        var Endpoint2=null;
        $("#StorageType").find("option[value='" + types + "']").attr("selected", true);
        if(types==1){
            $("#c3").css('display','block');
            $("#c3-1").css('display','none');
            $("#keyusername").text('AccessKey');
            $("#keypass").text('AccessSecret');
            $("#c3 label").text('Endpoint');
        }else if(types==2){
            $("#c3").css('display','block');
            $("#c3-1").css('display','none');
            $("#keyusername").text('AccessKey');
            $("#keypass").text('AccessSecret');
            $("#c3 label").text('Endpoint');
        }else if(types==3){
            $("#c3").css('display','none');
            $("#c3-1").css('display','none');
            $("#keyusername").text('操作员名称');
            $("#keypass").text('操作员密码');
            $("#c3 label").text('Endpoint');

        }else if(types==4){
            Endpoint2 = [[${Endpoint2}]];
            $("#c3").css('display','none');
            $("#c3-1").css('display','block');
            $("#keyusername").text('AccessKey');
            $("#keypass").text('SecretKey');
            $("#c3 label").text('Endpoint');
            $("#Endpoint2").find("option[value='" + Endpoint2 + "']").attr("selected", true);
        }else if(types==5){
            Endpoint2 = [[${Endpoint2}]];
            $("#keyusername").text('AccessKey');
            $("#keypass").text('SecretKey');
            $("#c1").css('display','none');
            $("#c2").css('display','none');
            $("#c3").css('display','none');
            $("#c3-1").css('display','none');
            $("#c4").css('display','none');
            $("#c5").css('display','none');
            $("#c6").css('display','block');
        }else if(types==6){
            $("#c3").css('display','block');
            $("#c3-1").css('display','none');
            $("#c3 label").text('地区代码');
            $("#keyusername").text('SecretId');
            $("#keypass").text('SecretKey');
        }
        else{
            $("#c3").css('display','block');
            $("#c3-1").css('display','none');
            $("#keyusername").text('AccessKey');
            $("#keypass").text('AccessSecret');
            $("#c3 label").text('Endpoint');
        }

        if(types==6){
            $("#ysm").text("如：北京地区就写ap-beijing");
        }else{
            $("#ysm").text("需带有http://或https:");
        }
    });

    //保存KEY
    function issave() {
        var AccessKey = $("#AccessKey").val();
        var AccessSecret = $("#AccessSecret").val();
        var Endpoint = "";
        var Bucketname = $("#Bucketname").val();
        var RequestAddress = $("#RequestAddress").val();
        var StorageType = $("#StorageType").val();
        if(StorageType==3){Endpoint="0";}
        else{
            if(StorageType==4){Endpoint = $("#Endpoint2").val();alert(Endpoint);}else{Endpoint = $("#Endpoint").val();}
        }
        if($("#StorageType").val()==5){
            $.ajax({
                type: "POST",
                url: "/admin/root/updatekey",
                data: {
                    AccessKey: 0,
                    AccessSecret: 0,
                    Endpoint: 0,
                    Bucketname: 0,
                    RequestAddress: 0,
                    StorageType: 5
                },
                dataType: "json",
                success: function (data) {
                    if (data > 0) {
                        layer.msg("保存成功", {icon: 1});
                    } else {
                        layer.msg("保存失败", {icon: 2});
                    }
                }
            });
        }else{
            if(AccessKey!="" && AccessSecret!="" &&Endpoint!="" &&  Bucketname!="" && RequestAddress!="" && StorageType!=""){
                $.ajax({
                    type: "POST",
                    url: "/admin/root/updatekey",
                    data: {
                        AccessKey: AccessKey,
                        AccessSecret: AccessSecret,
                        Endpoint: Endpoint,
                        Bucketname: Bucketname,
                        RequestAddress: RequestAddress,
                        StorageType: StorageType
                    },
                    dataType: "json",
                    success: function (data) {
                        if (data > 0) {
                            layer.msg("保存成功", {icon: 1});
                        } else {
                            layer.msg("保存失败", {icon: 2});
                        }
                    }
                });
            }else{
                layer.msg("有参数不正确，请检查", {icon: 2});
            }
        }
    }

</script>
</body>
</html>